<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="船舶信息" name="1">
				<template slot="title">
					<div class="compTop">
						<span class="cTitle">船舶信息</span>
						<span class="compTitle">组织</span>
						<el-select
						v-model="formData.companyId"
						v-selecttext="formData.companyName,compData,'companyId'"
						filterable
						collapse-tags
						size="mini"
						clearable
						:disabled="isGet"
						class="compList"
						@change="getCharging"
						>
						<el-option
							v-for="item in compData"
							:key="item.companyId"
							:label="item.companyName"
							:value="item.companyId"
						></el-option>
						</el-select>
					</div>
				</template>
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
            <el-col :span="8">
							<el-form-item label="船名航次" prop="shipvoyageName" class="top">
								<el-input
									v-model="formData.shipvoyageName"
									size="mini"
									placeholder="请输入船名"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="泊位" prop="berthNo" class="top">
								<el-input
									v-model="formData.berthNo"
									size="mini"
									placeholder="请输入泊位"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="内外贸" prop="tradeType" class="top">
								<el-input
									v-model="formData.tradeType"
									size="mini"
									placeholder="请输入内外贸"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="船代" prop="customerName" class="top">
								<el-input
									v-model="formData.customerName"
									size="mini"
									placeholder="请输入船代"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="载重吨" prop="weightTon" class="top">
								<el-input
									v-model="formData.weightTon"
									size="mini"
									placeholder="请输入载重吨"
									disabled
								/>
							</el-form-item>
						</el-col>
			<el-col :span="8">
							<el-form-item label="装卸" prop="loadUnload" class="top">
								<el-input
									v-model="formData.loadUnload"
									size="mini"
									placeholder="请输入装卸"
									disabled
								/>
							</el-form-item>
						</el-col>
			<el-col :span="24">
					<el-form-item label="" prop="shipperName" class="top">
						<el-card class="bgcard">合计金额 ： {{totalAmount  | formatMoney}}</el-card>
					</el-form-item>
				</el-col>
			<el-col :span="24">
				<el-form-item label="" prop="shipperName" class="top">
					<BaseTable
						:data="tableData"
						:columns="tableColumn"
						:tableHeight="tableHeight"
						:pagination="false"
					></BaseTable>
				</el-form-item>
			</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public'
import api from '@/api/billingSettlementSys/shipCost/shipService/index'

export default {
  name: 'settlement',
  components: { BaseTable },
  props: {
    // 表单验证规则
    rules: {
      type: Object
    },
    customerData: {
      type: Array
    },
    isGet: {
      type: Boolean,
      default: false
    },
    clickRow: {
      type: Object
    }
  },
  data() {
    return {
      activeNames: ['1', '2'],
      formData: {
        shipvoyageName: '',
        berthNo: '',
        tradeType: '',
        customerName: '',
        weightTon: '',
        loadUnload: '',
        companyId: '',
        companyName: ''
      }, // from
      tableData: [], // 结算数据
      tableColumn: [ // table表头
        { prop: 'rateItemName', label: '费目' },
        { prop: 'quantity', label: '数量' },
        { prop: 'rate', label: '单价' },
        { prop: 'unitName', label: '计量单位' },
        { prop: 'amount', label: '金额(元)', isMoney: true },
        { prop: 'tax', label: '税率' },
        { prop: 'taxAmount', label: '税额', isMoney: true }
      ],
      totalAmount: 0, // 总计金额
      compData: []// 组织数据
    }
  },
  created() {
    this.getComp()
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 200
    }
  },
  methods: {
    /**
     * 获取业务单元
     */
    async getComp() {
      const res = await publicapi.getListComp()
      this.compData = res.data.data
    },
    /**
	 * 修改组织
	 */
    getCharging(e, settlementStatus) {
      api.reqGetSettlement(this.clickRow.id, e).then(res => {
        this.tableData = res.data.data.costList
        this.totalAmount = res.data.data.totalAmount
        if (settlementStatus) {
          this.formData.companyId = res.data.data.chargeCompanyId ? res.data.data.chargeCompanyId : this.clickRow.companyId
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";
[v-cloak] {
	display: none;
}
</style>
